# Design System Documentation

## Overview

This design system is extracted from the Skene.ai landing page design. It follows a modern, minimalist aesthetic with a dark theme and warm accent colors.

---

## 🎨 Color System

### Primary Colors

```css
/* Background Colors */
--bg-primary: #060606;           /* Main dark background */
--bg-secondary: #2c2c2c;         /* Secondary dark background */
--bg-tertiary: #171717;          /* Tertiary background with slight variation */

/* Surface Colors */
--surface-light: #faf1e9;        /* Light beige surface */
--surface-warm: #edc29c;         /* Warm tan accent surface */
--surface-glass: rgba(255, 255, 255, 0.06); /* Glassmorphic surface */
--surface-glass-dark: rgba(6, 6, 6, 0.03);  /* Light glassmorphic surface */
```

### Text Colors

```css
/* Light Text (on dark backgrounds) */
--text-primary-light: #ebdccf;   /* Primary cream text */
--text-secondary-light: #fafafa; /* Bright white text */
--text-tertiary-light: #a1a1a1;  /* Muted gray text */
--text-quaternary-light: #6a6a6a; /* Darker gray text */

/* Dark Text (on light backgrounds) */
--text-primary-dark: #2c2c2c;    /* Primary dark text */
--text-secondary-dark: #060606;  /* Pure black text */
--text-tertiary-dark: #757171;   /* Muted dark gray */
```

### Accent Colors

```css
--accent-primary: #edc29c;       /* Warm tan accent */
--accent-secondary: #f5b276;     /* Orange accent */
--accent-tertiary: #e8c260;      /* Golden accent */
```

### Border Colors

```css
--border-default: rgba(255, 255, 255, 0.1);
--border-light: rgba(6, 6, 6, 0.1);
--border-emphasis: #353535;
--border-accent: #a1a1a1;
```

### Gradient Definitions

```css
/* Text Gradients */
--gradient-text-warm: linear-gradient(to bottom, #faf1e9, #edc29c);

/* Background Gradients */
--gradient-radial-dark: radial-gradient(
  circle at center,
  rgba(23, 23, 23, 0.44314) 0%,
  rgba(23, 23, 23, 1) 98%
);

--gradient-radial-warm: radial-gradient(
  circle at center,
  rgba(250, 241, 233, 1) 0%,
  rgba(244, 218, 195, 1) 49%,
  rgba(237, 194, 156, 1) 98%
);

--gradient-fade: linear-gradient(
  to top,
  rgba(29, 21, 21, 0.2) 66%,
  rgba(29, 21, 21, 0) 100%
);
```

---

## 📝 Typography System

### Font Families

```css
--font-sans: 'Geist', sans-serif;              /* Primary sans-serif */
--font-mono: 'Geist Mono', monospace;          /* Monospace for labels */
--font-brand: 'Inter', sans-serif;             /* For brand-specific text */
```

### Font Weights

```css
--weight-light: 300;
--weight-regular: 400;
--weight-medium: 500;
--weight-semibold: 600;
--weight-bold: 700;
```

### Type Scale

#### Display

```css
.text-display-large {
  font-family: var(--font-sans);
  font-weight: var(--weight-semibold);
  font-size: 96px;
  line-height: 152.994px;
  letter-spacing: -1.92px;
}
```

#### Headings

```css
.text-h1 {
  font-family: var(--font-sans);
  font-weight: var(--weight-medium);
  font-size: 48px;
  line-height: 52.8px;
  letter-spacing: -0.96px;
}

.text-h2 {
  font-family: var(--font-sans);
  font-weight: var(--weight-medium);
  font-size: 36px;
  line-height: 36.214px;
  letter-spacing: -0.8148px;
}

.text-h3 {
  font-family: var(--font-sans);
  font-weight: var(--weight-regular);
  font-size: 20px;
  line-height: 26px;
  letter-spacing: -0.96px;
}
```

#### Body

```css
.text-body-large {
  font-family: var(--font-sans);
  font-weight: var(--weight-regular);
  font-size: 18px;
  line-height: 23px;
}

.text-body-medium {
  font-family: var(--font-sans);
  font-weight: var(--weight-regular);
  font-size: 16px;
  line-height: 21px;
}

.text-body-small {
  font-family: var(--font-sans);
  font-weight: var(--weight-regular);
  font-size: 14px;
  line-height: 18.107px;
}
```

#### Labels

```css
.text-label-large {
  font-family: var(--font-mono);
  font-weight: var(--weight-medium);
  font-size: 16px;
  line-height: normal;
  text-transform: none;
}

.text-label-medium {
  font-family: var(--font-mono);
  font-weight: var(--weight-medium);
  font-size: 14px;
  line-height: 20px;
}

.text-label-small {
  font-family: var(--font-mono);
  font-weight: var(--weight-regular);
  font-size: 12px;
  line-height: normal;
  letter-spacing: 1.56px;
  text-transform: uppercase;
}

.text-label-tiny {
  font-family: var(--font-mono);
  font-weight: var(--weight-light);
  font-size: 11px;
  line-height: 14px;
  letter-spacing: 1.76px;
  text-transform: uppercase;
}
```

---

## 📏 Spacing System

### Base Unit: 4px

```css
--space-1: 4px;
--space-2: 8px;
--space-3: 12px;
--space-4: 16px;
--space-5: 18px;
--space-6: 24px;
--space-7: 26px;
--space-8: 32px;
--space-10: 40px;
--space-13: 52px;
--space-16: 62px;
--space-23: 90px;
```

### Common Component Spacing

```css
/* Buttons */
--button-padding-x: 16px;
--button-padding-y: 8px;
--button-gap: 23px;

/* Cards */
--card-padding: 40px;
--card-padding-small: 32px;
--card-gap: 26px;

/* Sections */
--section-gap-small: 18px;
--section-gap-medium: 62px;
```

---

## 🧩 Border Radius System

```css
--radius-sm: 4px;
--radius-md: 8px;
--radius-lg: 12px;
--radius-xl: 16px;
--radius-full: 9999px;
```

---

## 🎭 Effects & Filters

### Backdrop Blur

```css
--blur-light: blur(14.374px);
--blur-medium: blur(18px);
--blur-heavy: blur(35px);
--blur-extreme: blur(50px);
--blur-super: blur(500px);
```

### Box Shadows

```css
--shadow-glow: 0px 0px 0px 1.811px rgba(232, 194, 96, 0.3);
```

---

## 🔲 Component Library

### Buttons

#### Primary Button

```tsx
<button className="
  bg-[#edc29c] 
  text-black 
  font-['Geist_Mono:Medium'] 
  font-medium 
  text-[12px] 
  px-[16px] 
  py-[8px] 
  rounded-[8px] 
  leading-[20px]
">
  Sign up
</button>
```

#### Secondary Button (Outlined)

```tsx
<button className="
  border 
  border-[#2c2c2c] 
  text-[#2c2c2c] 
  font-['Geist_Mono:Medium'] 
  font-medium 
  text-[16px] 
  px-[35px] 
  py-[19px] 
  rounded-[8px]
">
  Join Waitlist →
</button>
```

#### Ghost Button (Light on Dark)

```tsx
<button className="
  border 
  border-[#faf1e9] 
  text-[#faf1e9] 
  font-['Geist_Mono:Medium'] 
  font-medium 
  text-[16px] 
  px-[35px] 
  py-[19px] 
  rounded-[8px]
">
  Try for free →
</button>
```

### Badges/Tags

#### Dark Badge

```tsx
<div className="
  bg-[#2c2c2c] 
  text-[#faf1e9] 
  font-['Geist_Mono:Regular'] 
  text-[12px] 
  tracking-[1.56px] 
  uppercase 
  px-[10px] 
  py-[4px] 
  rounded-[4px]
">
  Success analytics
</div>
```

#### Outlined Badge

```tsx
<div className="
  border 
  border-[#a1a1a1] 
  text-[#2c2c2c] 
  font-['Geist_Mono:Regular'] 
  text-[12px] 
  tracking-[1.56px] 
  uppercase 
  px-[10px] 
  py-[4px] 
  rounded-[4px]
">
  SKENE.AI
</div>
```

#### Accent Badge

```tsx
<div className="
  border 
  border-[#edc29c] 
  text-[#edc29c] 
  font-['Geist_Mono:Regular'] 
  text-[12px] 
  tracking-[1.56px] 
  uppercase 
  px-[10px] 
  py-[4px] 
  rounded-[4px]
">
  PRICING
</div>
```

### Navigation

#### Navigation Link

```tsx
<a className="
  font-['Geist_Mono:Medium'] 
  font-medium 
  text-[14px] 
  text-[#ebdccf] 
  leading-[20px]
">
  How it works
</a>
```

### Cards

#### Glassmorphic Card (Dark)

```tsx
<div className="
  backdrop-blur-[14.374px] 
  bg-[rgba(6,6,6,0.03)] 
  rounded-[12px] 
  px-[40px] 
  py-[38px] 
  flex 
  flex-col 
  gap-[26px]
">
  {/* Card content */}
</div>
```

#### Glassmorphic Card (Light)

```tsx
<div className="
  backdrop-blur-[14.374px] 
  bg-[rgba(255,255,255,0.06)] 
  rounded-[12px] 
  p-[40px]
">
  {/* Card content */}
</div>
```

#### Pricing Card

```tsx
<div className="
  backdrop-blur-[500px] 
  bg-gradient-to-r 
  from-[#2c2c2c] 
  to-[#2c2c2c] 
  rounded-[16px] 
  px-[32px] 
  py-[32px] 
  pb-[24px]
">
  {/* Pricing content */}
</div>
```

### List Items

#### Feature List Item

```tsx
<div className="flex gap-[6px] items-center">
  {/* Checkmark SVG */}
  <svg className="size-[12.8px]">
    {/* SVG path */}
  </svg>
  <p className="
    font-['Geist:Regular'] 
    text-[18px] 
    leading-[19.6px] 
    text-[#faf1e9]
  ">
    1 live site
  </p>
</div>
```

### Dividers

#### Horizontal Divider (Light)

```tsx
<div className="
  h-px 
  w-full 
  bg-[rgba(255,255,255,0.1)]
" />
```

#### Horizontal Divider (with opacity)

```tsx
<svg className="w-full h-px">
  <line 
    stroke="rgba(235, 220, 207, 0.24)" 
    strokeWidth="1" 
    x1="0" 
    y1="0.5" 
    x2="100%" 
    y2="0.5" 
  />
</svg>
```

---

## 📦 Content Block Patterns

### Hero Section

```tsx
<section className="relative w-full min-h-screen bg-[#060606]">
  <div className="flex flex-col items-center gap-[40px] pt-[200px]">
    {/* Badge */}
    <div className="border border-[#a1a1a1] text-[#ebdccf] px-[10px] py-[4px] rounded-[4px]">
      <p className="text-[12px] tracking-[1.56px] uppercase">CUSTOMER SUCCESS AI AGENT</p>
    </div>
    
    {/* Heading */}
    <h1 className="text-[#ebdccf] text-[96px] leading-[96px] tracking-[-1.92px] font-semibold text-center">
      Quickly build
      <br />
      product-led growth
    </h1>
    
    {/* Subheading */}
    <p className="text-[#a1a1a1] text-[18px] leading-[23px] text-center max-w-[580px]">
      AI-powered onboarding and retention. Automatically generated from your codebase.
    </p>
    
    {/* CTA Button */}
    <button className="bg-[#edc29c] text-black px-[35px] py-[19px] rounded-[8px]">
      Get started
    </button>
  </div>
</section>
```

### Stats Section

```tsx
<section className="flex gap-[18px] justify-center py-[100px]">
  {/* Stat Card */}
  <div className="
    backdrop-blur-[14.374px] 
    bg-[rgba(255,255,255,0.06)] 
    rounded-[12px] 
    w-[300px] 
    h-[254px] 
    flex 
    flex-col 
    items-center 
    justify-center 
    gap-[6px]
  ">
    <h2 className="
      text-[96px] 
      leading-[152.994px] 
      tracking-[-1.92px] 
      font-semibold 
      bg-gradient-to-b 
      from-[#faf1e9] 
      to-[#edc29c] 
      bg-clip-text 
      text-transparent
    ">
      5m
    </h2>
    <p className="
      text-[11px] 
      tracking-[1.76px] 
      uppercase 
      text-[#ebdccf] 
      font-light
    ">
      Average setup time
    </p>
  </div>
  
  {/* Repeat for other stats */}
</section>
```

### Feature Grid

```tsx
<section className="py-[130px] px-[32px]">
  <div className="max-w-[1004px] mx-auto flex flex-col gap-[62px]">
    {/* Header */}
    <div className="flex flex-col gap-[16px] items-center text-center">
      <h2 className="text-[48px] leading-[52.8px] tracking-[-0.96px] text-[#2c2c2c]">
        More than just onboarding
      </h2>
      <p className="text-[18px] leading-[23px] text-[#757171]">
        Everything you need to reach PLG, without the overhead.
      </p>
    </div>
    
    {/* Feature Grid */}
    <div className="flex flex-wrap gap-[18px] justify-center">
      {/* Feature Card */}
      <div className="
        backdrop-blur-[14.374px] 
        bg-[rgba(6,6,6,0.03)] 
        rounded-[12px] 
        px-[40px] 
        py-[38px] 
        w-[471px] 
        h-[207px] 
        flex 
        flex-col 
        gap-[26px]
      ">
        <div className="
          bg-[#2c2c2c] 
          text-[#faf1e9] 
          text-[12px] 
          tracking-[1.56px] 
          uppercase 
          px-[10px] 
          py-[4px] 
          rounded-[4px] 
          w-fit
        ">
          Success analytics
        </div>
        <p className="text-[16px] leading-[21px] text-[#060606]">
          Real-time visibility into what's working. Track completion rates, 
          identify drop-off points, and measure time-to-activation.
        </p>
      </div>
      
      {/* Repeat for other features */}
    </div>
  </div>
</section>
```

### How It Works Section

```tsx
<section className="py-[100px]">
  <div className="
    bg-[#faf1e9] 
    rounded-[16px] 
    p-[87px] 
    max-w-[1376px] 
    mx-auto
  ">
    {/* Header */}
    <div className="mb-[62px]">
      <div className="
        border 
        border-[#a1a1a1] 
        text-[#2c2c2c] 
        text-[12px] 
        tracking-[1.56px] 
        uppercase 
        px-[10px] 
        py-[4px] 
        rounded-[4px] 
        w-fit 
        mb-[40px]
      ">
        SKENE.AI
      </div>
      <h2 className="text-[48px] leading-[52.8px] tracking-[-0.96px] text-[#060606]">
        How it works
      </h2>
      <p className="text-[18px] leading-[23px] text-[#757171] mt-[16px]">
        From codebase to product-led growth in four steps.
      </p>
    </div>
    
    {/* Steps */}
    <div className="space-y-[140px]">
      {/* Step */}
      <div className="flex gap-[120px]">
        <div className="flex-shrink-0">
          <div className="
            border 
            border-[#2c2c2c] 
            text-[#2c2c2c] 
            text-[12px] 
            tracking-[1.56px] 
            uppercase 
            px-[10px] 
            py-[4px] 
            rounded-[4px] 
            w-fit 
            mb-[16px]
          ">
            CONNECT
          </div>
          <p className="text-[16px] leading-[19.6px] text-[#2c2c2c] max-w-[320px]">
            Skene links to GitHub, GitLab, or Bitbucket via read-only authorization. 
            No code changes required.
          </p>
        </div>
        <div className="flex-1">
          {/* Visual/Image */}
        </div>
      </div>
      
      {/* Repeat for other steps with horizontal dividers */}
    </div>
  </div>
</section>
```

### Pricing Cards

```tsx
<section className="py-[100px]">
  <div className="max-w-[1376px] mx-auto px-[32px]">
    {/* Header */}
    <div className="mb-[100px]">
      <div className="
        border 
        border-[#edc29c] 
        text-[#edc29c] 
        text-[12px] 
        tracking-[1.56px] 
        uppercase 
        px-[10px] 
        py-[4px] 
        rounded-[4px] 
        w-fit 
        mb-[40px]
      ">
        PRICING
      </div>
      <h2 className="text-[48px] leading-[52.8px] tracking-[-0.96px] text-[#ebdccf]">
        Simple, reliable, <span className="text-[#edc29c]">outcome-based</span> pricing
      </h2>
      <p className="text-[18px] leading-[23px] text-[#a1a1a1] mt-[16px]">
        Only pay when your customer succeeds.
      </p>
    </div>
    
    {/* Pricing Cards Grid */}
    <div className="flex gap-[24px] justify-center">
      {/* Free Plan */}
      <div className="
        backdrop-blur-[500px] 
        bg-gradient-to-r 
        from-[#2c2c2c] 
        to-[#2c2c2c] 
        rounded-[16px] 
        px-[32px] 
        py-[32px] 
        pb-[24px] 
        w-[344px] 
        flex 
        flex-col 
        justify-between
      ">
        <div>
          <div className="
            backdrop-blur-[50px] 
            border 
            border-[#faf1e9] 
            text-[#faf1e9] 
            text-[11px] 
            uppercase 
            px-[5px] 
            py-[2.5px] 
            rounded-[4px] 
            w-fit 
            mb-[8px]
          ">
            getting started
          </div>
          
          <h3 className="text-[36px] tracking-[-0.96px] text-[#faf1e9] mb-[4px]">
            Free plan
          </h3>
          <p className="text-[20px] tracking-[1.2px] text-[#faf1e9] mb-[40px]">
            0€/month
          </p>
          
          {/* Features */}
          <div className="flex flex-col gap-[16px]">
            <div className="flex gap-[6px] items-center">
              {/* Check icon */}
              <p className="text-[18px] leading-[19.6px] text-[#faf1e9]">
                1 live site
              </p>
            </div>
            {/* More features */}
          </div>
        </div>
        
        <button className="
          border 
          border-[#faf1e9] 
          text-[#faf1e9] 
          px-[35px] 
          py-[19px] 
          rounded-[8px] 
          w-full 
          mt-[40px]
        ">
          Try for free →
        </button>
      </div>
      
      {/* Growth Plan (Popular) */}
      <div className="
        backdrop-blur-[500px] 
        bg-gradient-to-r 
        from-[#edc29c] 
        to-[#edc29c] 
        rounded-[16px] 
        border 
        border-white 
        px-[32px] 
        py-[32px] 
        pb-[24px] 
        w-[344px] 
        relative
      ">
        <span className="
          absolute 
          top-[40px] 
          right-[32px] 
          text-[12px] 
          text-[#2c2c2c]
        ">
          Popular
        </span>
        
        {/* Same structure as Free Plan but with light text colors */}
      </div>
    </div>
  </div>
</section>
```

### FAQ Accordion

```tsx
<section className="py-[100px]">
  <div className="max-w-[1376px] mx-auto px-[126px]">
    {/* Header */}
    <div className="mb-[90px]">
      <div className="
        border 
        border-[#edc29c] 
        text-[#edc29c] 
        text-[12px] 
        tracking-[1.56px] 
        uppercase 
        px-[10px] 
        py-[4px] 
        rounded-[4px] 
        w-fit 
        mb-[40px]
      ">
        FAQs
      </div>
      <h2 className="text-[48px] leading-[52.8px] text-[#ebdccf] mb-[16px]">
        Frequently Asked Questions
      </h2>
      <p className="text-[18px] leading-[23px] text-[#ebdccf]">
        Everything you need to know about Skene
      </p>
    </div>
    
    {/* FAQ Items */}
    <div className="max-w-[647px] ml-auto">
      <div className="flex flex-col gap-[25px]">
        {/* FAQ Item */}
        <div className="flex justify-between items-center">
          <h3 className="text-[20px] leading-[26px] tracking-[-0.96px] text-[#ebdccf]">
            How do I get started with Skene?
          </h3>
          {/* Arrow icon */}
          <svg className="size-[24px]">{/* dropdown arrow */}</svg>
        </div>
        
        {/* Divider */}
        <div className="h-px w-full bg-[rgba(235,220,207,0.24)]" />
        
        {/* Repeat for other FAQs */}
      </div>
    </div>
  </div>
</section>
```

---

## 🎯 Layout Patterns

### Container

```css
.container {
  max-width: 1440px;
  margin: 0 auto;
  padding: 0 32px;
}

.container-narrow {
  max-width: 1004px;
  margin: 0 auto;
}

.container-content {
  max-width: 1376px;
  margin: 0 auto;
  padding: 0 32px;
}
```

### Section Spacing

```css
.section-padding-large {
  padding: 130px 0;
}

.section-padding-medium {
  padding: 100px 0;
}

.section-padding-small {
  padding: 62px 0;
}
```

### Grid Patterns

```css
/* Feature Grid */
.feature-grid {
  display: flex;
  flex-wrap: wrap;
  gap: 18px;
  justify-content: center;
}

.feature-grid-item {
  width: 471px;
}

/* Stats Grid */
.stats-grid {
  display: flex;
  gap: 18px;
  justify-content: center;
}

.stats-grid-item {
  width: 300px;
  height: 254px;
}
```

---

## 🎬 Interaction Patterns

### Hover States

```css
/* Button Hover */
button:hover {
  opacity: 0.9;
  transform: translateY(-1px);
  transition: all 0.2s ease;
}

/* Card Hover */
.card:hover {
  border-color: rgba(255, 255, 255, 0.2);
  transition: border-color 0.2s ease;
}
```

### Focus States

```css
/* Focus Ring */
*:focus-visible {
  outline: 2px solid #edc29c;
  outline-offset: 2px;
}
```

---

## 📱 Responsive Breakpoints

```css
/* Mobile */
@media (max-width: 640px) {
  --container-padding: 20px;
}

/* Tablet */
@media (max-width: 1024px) {
  --container-padding: 32px;
}

/* Desktop */
@media (min-width: 1440px) {
  --container-padding: 40px;
}
```

---

## ♿ Accessibility Guidelines

1. **Color Contrast**: All text meets WCAG AA standards
   - Light text on dark: #ebdccf on #060606 (14.5:1)
   - Dark text on light: #2c2c2c on #faf1e9 (10.2:1)

2. **Focus Indicators**: All interactive elements have visible focus states

3. **Semantic HTML**: Use proper heading hierarchy (h1 → h2 → h3)

4. **Alt Text**: All images and icons have descriptive alternatives

5. **Touch Targets**: Minimum 44x44px for all interactive elements

---

## 🔧 Usage Examples

### Importing Design Tokens

```tsx
// In your CSS file
@import './design-system/tokens.css';

// In your component
import './design-system/components.css';
```

### Component Composition

```tsx
import { Button } from './design-system/components/Button';
import { Card } from './design-system/components/Card';
import { Badge } from './design-system/components/Badge';

function FeatureCard() {
  return (
    <Card variant="glassmorphic-light">
      <Badge variant="dark">Success analytics</Badge>
      <p className="text-body-medium">
        Real-time visibility into what's working.
      </p>
    </Card>
  );
}
```

---

## 📚 Additional Resources

- **Figma File**: Link to the original design
- **Design Tokens**: `/src/design-system/tokens.css`
- **Component Library**: `/src/design-system/components/`
- **Icon Library**: SVG icons from `/src/imports/svg-5qwtoklvem.ts`

---

## 🎨 Brand Guidelines

### Voice & Tone
- **Professional yet approachable**: Technical but not intimidating
- **Clear and concise**: Focus on outcomes and benefits
- **Modern**: Use contemporary language and industry terms

### Writing Style
- Use sentence case for headings (except when emphasizing with UPPERCASE labels)
- Keep paragraphs short and scannable
- Use active voice
- Focus on "you" and benefits to the user

---

## 🔄 Version History

**v1.0.0** - Initial design system extraction from Skene.ai landing page
- Complete color palette
- Typography system
- Component library
- Content block patterns
- Layout guidelines